<template>
  <b-col class="show-items  mt-2" cols="12">
    <h5 class="mt-2 text-center">修改个人信息</h5>
    <b-form-group
        id="fieldset-1"
        label="昵称*："
        label-for="input-1"
        class="mb-1"
    >
      <b-form-input
          id="input-1"
          v-model="form.nickname"
          :state="status.nickname"
          trim
          :disabled="readonly"
          placeholder="不能为空"
          @blur="validNickname"
      ></b-form-input>
      <b-form-invalid-feedback v-text="warn.nickname"></b-form-invalid-feedback>
    </b-form-group>
    <b-form-group
        id="fieldset-2"
        label="邮箱*："
        label-for="input-2"
        class="mb-1"
        description="此邮箱将用于找回密码和接收消息"
    >
      <b-form-input
          id="input-2"
          v-model="form.email"
          :state="status.email"
          trim
          :disabled="readonly"
          placeholder="不能为空"
          @blur="validEmail"
      ></b-form-input>
      <b-form-invalid-feedback v-text="warn.email"></b-form-invalid-feedback>
    </b-form-group>
    <b-form-group
        id="fieldset-4"
        label="性别*："
        label-for="input-4"
        class="mb-1"
    >
      <b-form-radio-group
          id="input-4"
          v-model="form.gender"
          :state="status.gender"
          :disabled="readonly"
          @blur="validGender"
      >
        <b-form-radio value="1" class="mr-5">男</b-form-radio>
        <b-form-radio value="2">女</b-form-radio>
      </b-form-radio-group>
      <b-form-invalid-feedback v-text="warn.gender"></b-form-invalid-feedback>
    </b-form-group>
    <b-form-group
        id="fieldset-3"
        label="个人简介："
        label-for="input-3"
        class="mb-1"
    >
      <b-form-textarea
          id="input-3"
          v-model="form.desc"
          :state="status.desc"
          trim
          :disabled="readonly"
          rows="2"
          max-rows="4"
          placeholder="不超过50字"
          @blur="validDesc"
      ></b-form-textarea>
      <b-form-invalid-feedback v-text="warn.desc"></b-form-invalid-feedback>
    </b-form-group>
    <b-form-group class="text-center mt-3 mb-0">
      <b-button class="mr-4 px-5"
                variant="info" v-if="readonly"
                @click="readonly =false"
      >
        修改
      </b-button>
      <b-button class="mr-4 px-5" variant="primary" v-else @click="submit">
        确定
      </b-button>
      <b-button class="px-5" @click="$emit('dismiss')">
        取消
      </b-button>
    </b-form-group>
  </b-col>
</template>

<script>
  export default {
    name: "UpdateInfo",
    data() {
      return {
        readonly: true,
        status: {
          email: null,
          desc: null,
          gender: null,
          nickname: null,

        },
        form: {
          email: this.$store.state.email,
          desc: this.$store.state.description,
          gender: this.$store.state.gender,
          nickname: this.$store.state.nickname,
        },
        warn: {
          email: '',
          desc: '',
          gender: '',
          nickname: '不能为空',
        }
      }
    },
    methods: {
      validNickname() {
        if (this.form.nickname === '') {
          this.status.nickname = false
          this.warn.nickname = '不能为空'
          return false
        } else {
          let pattern = /^[\u4e00-\u9fa5\w\d@.-_]{1,20}$/
          if (pattern.test(this.form.nickname)) {
            this.status.nickname = true
            return true
          } else {
            this.status.nickname = false
            this.warn.nickname = '昵称不得长于20个字'
            return false
          }
        }
      },
      validEmail() {
        if (this.form.email === '') {
          this.status.email = false
          this.warn.email = '不能为空'
          return false
        } else {
          let pattern = /^[a-zA-Z0-9_-]{1,20}@[a-zA-Z0-9_-]{1,10}(\.[a-zA-Z0-9_-]{1,10})?$/
          if (pattern.test(this.form.email)) {
            this.status.email = true
            return true
          } else {
            this.status.email = false
            this.warn.email = '邮箱格式错误或长于40个字'
            return false
          }
        }
      },
      validGender() {
        if (this.form.gender === '' || this.form.gender === 0) {
          this.status.gender = false
          this.warn.gender = '不能为空'
          return false
        } else {
          this.status.gender = true
          return true
        }
      },
      validDesc() {
        let pattern = /^[\u4e00-\u9fa5\w\d\s@.-_]{0,50}$/
        if (pattern.test(this.form.desc)) {
          this.status.desc = true
          return true
        } else {
          this.status.desc = false
          this.warn.desc = '不得长于50个字'
          return false
        }

      },
      submit() {
        let res = this.validNickname() && this.validEmail() && this.validGender() && this.validDesc()
        if (res) {
          // alert('submit')
          //submit
          let data = {
            uuid:this.$store.state.uuid,
            nickname:this.$ajax.encode(this.form.nickname),
            gender:this.form.gender,
            email:this.$ajax.encode(this.form.email),
            desc:this.$ajax.encode(this.form.desc)
          }
          this.$ajax.post("/user/updateProfile",data).then(resp=>{
            let data = resp.data
            if (data.code === 200){
              this.$store.commit('init',data.data)
              this.$emit('onmsg',data.msg)
              this.$emit('dismiss')
            }else{
              this.$emit('onmsg',data.msg,false)
            }
          }).catch(err=>{
            console.log(err);
          })
        }
      },

    }
  }
</script>

<style scoped>

</style>